#タイトル
グラフのタイトルは、グラフの上部に描画するテキストを定義します。
#タイトル構成
名前空間:options.plugins.title、グラフのタイトルのグローバル オプションは次のように定義されます。Chart.defaults.plugins.title。
| 名前 | タイプ | デフォルト | スクリプト可能 | 説明 |
|---|---|---|---|---|
align | string | 'center' | はい | タイトルの配置。もっと... |
color | Color | Chart.defaults.color | はい | テキストの色。 |
display | boolean | false | はい | タイトルは表示されていますか？ |
fullSize | boolean | true | はい | このボックスがキャンバスの幅/高さ全体を占めるようにマークします。もしもfalse、ボックスのサイズが変更され、グラフ領域の上/横に配置されます。 |
position | string | 'top' | はい | タイトルの位置。もっと... |
font | Font | {weight: 'bold'} | はい | 見るフォント |
padding | Padding | 10 | はい | タイトルの周囲に適用するパディング。それだけtopとbottomが実装されています。 |
text | string|string[] | '' | はい | 表示するタイトルテキスト。配列として指定した場合、テキストは複数行に表示されます。 |
ノート
さらに視覚的なカスタマイズが必要な場合は、HTML と CSS を使用してタイトルを実装できます。
#位置
可能なタイトル位置の値は次のとおりです。
'top''left''bottom''right'
#整列
タイトルの配置。オプションは次のとおりです。
'start''center''end'
#使用例
以下の例では、作成されるチャートで「カスタム チャート タイトル」というタイトルを有効にします。
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Custom Chart Title'
}
}
}
});
この例は、上下のタイトル テキスト パディングを個別に指定する方法を示しています。
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Custom Chart Title',
padding: {
top: 10,
bottom: 30
}
}
}
}
});